<template>
  <div>
    <a-page-header
        style="border: 1px solid rgb(235, 237, 240);"
        :ghost="false"
        :title="`${(exam && exam.title) || '比赛'} - 排行榜`"
        :sub-title="(exam && exam.timeS) || ''"
        @back="() => $router.go(-1)"
    >
      <a-row type="flex">
        <a-statistic title="参与人数" suffix="人" :value="`${rankList.length}/${userCount}`" style="margin: 0 32px;"/>
        <a-statistic title="最低分" :value="min" style="margin: 0 32px;"/>
        <a-statistic title="最高分" :value="max" style="margin: 0 32px;"/>
        <a-statistic title="平均分" :value="mean" style="margin: 0 32px;"/>
        <a-statistic title="总分" :value="(exam && exam.score) || 0" style="margin: 0 32px;"/>
      </a-row>
    </a-page-header>
    <a-layout>
      <a-layout-content style="padding: 10px;min-height: calc(100vh - 140px);">
        <a-card hoverable style="max-width: 1000px; margin: 10px auto 50px auto;">
          <a-list
              class="demo-loadmore-list"
              :loading="false"
              item-layout="horizontal"
              :data-source="rankList"
          >
            <a-list-item slot="renderItem" slot-scope="item">
              <a-list-item-meta :description="`${item.class}`">
                <h3 slot="title">{{ item.name }}</h3>
                <a-avatar size="large" slot="avatar">
                  {{item.order}}
                </a-avatar>
              </a-list-item-meta>
              <div>{{ item.count }} / {{ (exam && exam.times) || 1 }}</div>
              <a slot="actions" style="font-weight: bold;">{{ item.score }}</a>
            </a-list-item>
          </a-list>
        </a-card>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import global from "@/components/global";

export default {
  name: "rank",
  data(){
    return {
      rankList: [],
      exam: null,
      userCount: 0,
      mean: 0,
      max: 0,
      min: 0
    }
  },
  methods: {
    loadData(){
      let id = this.$route.query.exam
      let that = this
      global.http(this, 'api/Rank/Rank?exam=' + id, {
        success(res){
          that.exam = res.data.exam
          that.exam.timeS = `时间: ${global.dateToMdDay(that.exam.startTime)} ${global.dateToHm(that.exam.startTime)} ~ ${global.dateToHm(that.exam.endTime)}`
          that.exam.score = that.exam.fillCount * that.exam.fillScore + that.exam.judgeCount * that.exam.judgeScore + that.exam.radioCount * that.exam.radioScore + that.exam.multipleCount * that.exam.multipleScore
          let peoples = Array.from(new Set(res.data.papers.map(x=>x.user)))
          let com = [global.mean, global.max, global.min][that.exam.type]
          let rank = peoples.map(x => {
            let item = {name: x}
            let papers = res.data.papers.filter(p => p.user === x)
            item.score = com(papers.map(m => m.score))
            item.count = papers.length
            item.number = papers[0].number
            item.class = papers[0].class
            return item
          })
          rank.sort((a,b) => b.score - a.score)
          rank = rank.map((x, index)=>{return {order: index + 1, ...x}})
          that.rankList = rank
          that.userCount = res.data.userCount
          that.mean = global.mean(rank.map(x=>x.score))
          that.max = global.max(rank.map(x=>x.score))
          that.min = global.min(rank.map(x=>x.score))
        },
        complete(){
          that.loading = false
        }
      })
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style scoped>
.demo-loadmore-list {
  min-height: 350px;
  max-width: 800px;
  margin: 0 auto;
}

</style>